<template>
<layout>
  <a-row :gutter="32">
    <a-col :span="16">
      <h1 class="home__header">菜单 & 操作统计</h1>
      <div ref="barChartContainer" style="height: 240px"></div>
    </a-col>
    <a-col :span="8">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-statistic class="home__statistic" title="角色" :value="statisticState.data.roleAmount">
            <template #suffix>
              <team-outlined class="blue" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic class="home__statistic" title="用户" :value="statisticState.data.userAmount">
            <template #suffix>
              <user-outlined class="yellow" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic class="home__statistic" title="系统" :value="statisticState.data.systemAmount">
            <template #suffix>
              <appstore-outlined class="purple" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic class="home__statistic" title="菜单" :value="statisticState.data.menuAmount">
            <template #suffix>
              <unordered-list-outlined class="pink" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic class="home__statistic" title="操作" :value="statisticState.data.actionAmount">
            <template #suffix>
              <calculator-outlined class="text-info" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic class="home__statistic" title="授权" :value="statisticState.data.permissionAmount">
            <template #suffix>
              <audit-outlined class="green" />
            </template>
          </a-statistic>
        </a-col>
      </a-row>
    </a-col>
    <a-col :span="24">
      <a-card title="已授权系统" class="home__systems">
        <div v-for="(obj, index) in state.systems" :key="obj.uuid" class="object__item" :class="`col-${index % 4 + 1}`">
          <div
            class="object__current-value object__option"
            @click="joinSystem(obj)"
          >
            <a-image
              :width="48"
              :height="48"
              :src="ossConfig.doc.domain + obj.icon"
              :preview="false"
              fallback=""
            />
            <p class="object__current-system-name">{{obj.objectName}}</p>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</layout>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
import { Column } from '@antv/g2plot'
import {
  TeamOutlined,
  UserOutlined,
  AppstoreOutlined,
  UnorderedListOutlined,
  AuditOutlined,
  CalculatorOutlined
} from '@ant-design/icons-vue'
// Object 是js的关键字, 别名处理一下
import {
  roleOperations,
  userDetail,
  addUser,
  updateUser,
  objectList,
  ObjectListReply,
  RoleOperationsReqParams,
  ObjectOption,
  RoleOperationsReply,
  UserForm,
  Object as Obj,
  homeStatistic,
  StatisticReply
} from '@/api/ssoms'
import { ossConfig } from '@/config'

interface System {
  name: string
  icon: string
}

interface State {
  loading: boolean
  systems: Array<Obj>
}

const state = reactive<State>({
  loading: false,
  systems: []
})

interface StatisticState {
  loading: boolean
  data: StatisticReply
}

const statisticState = reactive<StatisticState>({
  loading: false,
  data: {
    roleAmount: 0,
    userAmount: 0,
    systemAmount: 0,
    menuAmount: 0,
    actionAmount: 0,
    permissionAmount: 0,
    statistics: []
  }
})

const barChartContainer = ref()

onBeforeMount(() => {
  getSystemOptions()
})

const getSystemOptions = () => {
  objectList({ topKey: '', key: '', objectName: '' }).then((data: ObjectListReply) => {
    state.systems = data.list
  }).finally(() => {
    state.loading = false
  })
}

const getStatistic = () => {
  homeStatistic().then(data => {
    statisticState.data = data
    initChart()
  })
}

const joinSystem = (system: Obj) => {
  window.open(system.identifier, '_blank')
}

onMounted(() => {
  getStatistic()
})

const initChart = () => {
  const column = new Column(barChartContainer.value, {
    data: statisticState.data.statistics,
    theme: {
      colors10: ['#1890ff', '#91d5ff']
    },
    maxColumnWidth: 15,
    xField: 'month',
    yField: 'value',
    seriesField: 'type',
    isGroup: true,
    columnStyle: {
      radius: [2, 2, 0, 0],
    },
  })
  column.render()
}
</script>
